
<template>
  <div :class="['left_item_container',{'lefy_item_active':selectIndex===index}]"
  @click="onClick">
    {{item.cname}}
  </div>
</template>

<script>
export default {
  props:{
    item:{
      type:Object,
      required:true
    },
    selectIndex:{
      type:Number
    },
    index:{
      type:Number
    }
  },
  methods:{
    onClick(){
      this.$emit("changeSelectIndex",this.index)
    }
  }
}
</script>

<style scoped>
.left_item_container
{
  width: 100%;
  height: 50px;
  border: 1px solid blueviolet;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  /* font-size: 12px; */
}

.lefy_item_active
{
  border-left: 5px solid pink;
}
</style>